<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>图书-图书推荐</title>
    <link rel="icon" href="/static/images/t_logo.ico" type="image/x-icon"/>
    <link rel="stylesheet" href="/static/css/lyk-global.css" />
    <link rel="stylesheet" href="/static/elementui/lib/theme-chalk/index.css">
    <script src="/static/js/jquery.min.js" type="text/javascript"></script>
    <script src="/static/js/requestApi.js" type="text/javascript"></script>
    <script src="/static/js/vue/vue.js"></script>
    <!-- 引入elementui -->
    <script src="/static/elementui/js/element.js"></script>
    <script src="/static/js/axios.min.js"></script>
    <script src="/static/js/axios-config.js"></script>
    <script src="/static/js/utilJs.js"></script>
</head>
<style>
    *{
        font-size: 14px
    }
    [v-cloak] {
        display: none;
    }
</style>
<body style="background-color: #fff">
<div id="app" v-cloak>
    <div class="mt-8 ml-4">
        <div>
            <el-button type="primary" size="small" @click="showAddBookRecommend">添加推荐书籍</el-button>
        </div>
        <el-table :data="tableData" v-loading="tableDataLoading" class="mt-4">
            <el-table-column prop="id" label="书籍编号" width="150"></el-table-column>
            <el-table-column prop="bookName" label="名称"></el-table-column>
            <el-table-column prop="typeName" label="书籍类型"></el-table-column>
            <el-table-column prop="author" label="作者"></el-table-column>
            <el-table-column prop="publish" label="出版社"></el-table-column>
            <el-table-column prop="isbn" label="isbn"></el-table-column>
<!--            <el-table-column prop="stock" label="库存"></el-table-column>-->
            <el-table-column prop="picUrl" label="封面">
                <template slot-scope="scope">
                    <img :src="'/book/getLocalSystemPic?filePath=' + scope.row.picUrl" alt="Smiley face" width="42" height="42" v-if="scope.row.picUrl">
                </template>
            </el-table-column>

            <el-table-column label="操作">
                <template slot-scope="scope">
                    <el-button type="danger" size="small" @click="deleteBookRecommend(scope.row)">删除</el-button>
                </template>
            </el-table-column>
        </el-table>

        <el-dialog title="添加推荐图书" :visible.sync="showAddBookRecommendVisible" width="1200px" :close-on-click-modal="false" append-to-body	>
            <div >
                <div class="mt-8 ml-4">
                    <div class="df-aic ">
                        <el-input placeholder="请输入书籍名称" size="small" style="width:200px;" class="ml-2" v-model="queryParam.bookName" @keyup.native.enter="getTableDataMethod(true)"></el-input>
                        <el-input placeholder="请输入isbn" size="small" style="width:200px;" class="ml-2" v-model="queryParam.isbn" @keyup.native.enter="getTableDataMethod(true)" class="ml-2"></el-input>
                        <el-input placeholder="请输入条码号" size="small" style="width:200px;" class="ml-2" v-model="queryParam.ticketNumber" @keyup.native.enter="getTableDataMethod(true)" class="ml-2"></el-input>
                        <el-select v-model="queryParam.typeId" placeholder="请选择父类型" size="small" filterable style="width:200px;" clearable class="ml-2">
                            <el-option
                                    v-for="item in allTypeList"
                                    :key="item.id"
                                    :label="item.name"
                                    :value="item.id">
                            </el-option>
                        </el-select>
                        <el-button type="primary" size="small" class="ml-2" @click="getAddBookRecommendTableDataMethod(true)">搜索</el-button>
                    </div>
                    <el-table :data="addBookRecommendTableData" v-loading="addBookRecommendTableDataLoading" class="mt-4">
                        <el-table-column prop="id" label="书籍编号" width="150"></el-table-column>
                        <el-table-column prop="bookName" label="名称"></el-table-column>
                        <el-table-column prop="typeName" label="书籍类型"></el-table-column>
                        <el-table-column prop="author" label="作者"></el-table-column>
                        <el-table-column prop="publish" label="出版社"></el-table-column>
                        <el-table-column prop="isbn" label="isbn"></el-table-column>
<!--                        <el-table-column prop="stock" label="库存"></el-table-column>-->

                        <el-table-column label="操作">
                            <template slot-scope="scope">
                                <el-button type="primary" size="small" @click="addBookRecommendSubmit(scope.row)">确定</el-button>
                            </template>
                        </el-table-column>
                    </el-table>
                    <el-pagination background layout="total,sizes,prev, pager, next" :total="addBookRecommendTableDataPaging.total"
                                   :page-sizes="[10, 20, 50]"
                                   prev-text="上一页" next-text="下一页"
                                   :page-size="addBookRecommendTableDataPaging.pageSize"
                                   :current-page="addBookRecommendTableDataPaging.currentPage"
                                   @current-change="addBookRecommendTableDataPagingChange"
                                   @prev-click="addBookRecommendTableDataPagingChange" @next-click="addBookRecommendTableDataPagingChange"
                                   @size-change="addBookRecommendTableDataPagingSizeChange"
                                   style="float:right;margin-top: 40px;padding-bottom:50px;">
                    </el-pagination>
                </div>
                <div style="margin-top:100px;">

                </div>
            </div>
            <span slot="footer" class="dialog-footer">
                    <el-button @click="showAddBookRecommendVisible = false">取 消</el-button>
            </span>
        </el-dialog>

    </div>

</div>
</body>

<script type="text/javascript">
    const vm = new Vue({ // 配置对象 options
        // 配置选项(option)
        el: '#app', // element: 指定用vue来管理页面中的哪个标签区域
        components: {
        },
        data() {
            return {
                queryParam : {
                    bookName:"",
                    typeId:"",
                    isbn:"",
                    ticketNumber:""
                },
                tableData:[],
                tableDataLoading:false,
                showAddBookRecommendVisible:false,
                addBookRecommendTableData:[],
                addBookRecommendTableDataPaging : {
                    currentPage : 1,
                    pageSize : 10,
                    total : 0,
                },
                addBookRecommendTableDataLoading:false,
                allTypeList:[],

            }
        },
        mounted() {
            let that = this;
            this.$nextTick(function () {
                that.getTableDataMethod();
                this.getAllTypeListMethod();
            });
        },
        methods: {
            //获取所有的图书类型的数据
            getAllTypeListMethod(){
                let that = this;
                that.allTypeList = [];
                requestApiTB("type/getAllTypeList",{}, "POST", function(res){
                    if(res.code === 0){
                        that.allTypeList = res.data;
                    }
                });
            },

            getTableDataMethod(){
                let that = this;

                this.tableDataLoading = true;
                that.tableData = [];
                requestApiTB("bookRecommend/getBookRecommendList",{},'post',function(res){
                    that.tableDataLoading = false;
                    if (res.code === 0) {
                        that.tableData = res.data;
                    }else{
                        that.$message.error(res.msg);
                    }
                });
            },
            //展示推荐书籍的弹窗
            showAddBookRecommend(){
                let that = this;
                that.showAddBookRecommendVisible = true;
                this.$nextTick(function () {
                    that.getAddBookRecommendTableDataMethod();
                });
            },

            addBookRecommendTableDataPagingChange(val) {
                let that = this;
                that.addBookRecommendTableDataPaging.currentPage = val;
                that.getAddBookRecommendTableDataMethod();
            },
            addBookRecommendTableDataPagingSizeChange(val) {
                let that = this;
                that.addBookRecommendTableDataPaging.pageSize = val;
                that.getAddBookRecommendTableDataMethod();
            },

            //获取表格的数据
            getAddBookRecommendTableDataMethod(isChongZhi){
                let that = this;
                if (isChongZhi) {
                    this.addBookRecommendTableDataPaging.currentPage = 1;
                }
                const {bookName,isbn,ticketNumber} = this.queryParam
                let queryData = {
                    bookName: $.trim(bookName),
                    isbn: $.trim(isbn),
                    ticketNumber: $.trim(ticketNumber),
                    pageNum: this.addBookRecommendTableDataPaging.currentPage,
                    pageSize: this.addBookRecommendTableDataPaging.pageSize,
                }
                this.tableDataLoading = true;
                that.addBookRecommendTableData = [];
                axios.post('/book/getBookList', queryData)
                    .then(result => {
                        let res = result.data;
                        this.tableDataLoading = false;
                        if (res.code === 0) {
                            that.addBookRecommendTableData = res.data.list;
                            that.addBookRecommendTableDataPaging.total = res.data.total;
                        }
                    }).catch(error => {
                    that.$message.error("error");
                    this.tableDataLoading = false
                })
            },

            //添加推荐图书的提交的方法
            addBookRecommendSubmit(row){
                let that = this;
                if(!row.id){
                    that.$message.error("请选择图书");
                }
                requestApiTB("bookRecommend/addBookRecommend", {"bookId":row.id}, 'POST', function (res) {
                    if (res.code === 0) {
                        that.$message.success("执行成功");
                        that.getTableDataMethod();
                    } else {
                        that.$message.error(res.msg);
                    }
                });

            },

            //删除图书推荐的需求
            deleteBookRecommend(row){
                let that = this;
                if(!row.id){
                    that.$message.error("请选择需要删除的数据");
                }
                requestApiTB("bookRecommend/deleteBookRecommendById", {"id":row.id}, 'POST', function (res) {
                    if (res.code === 0) {
                        that.$message.success("执行成功");
                        that.getTableDataMethod();
                    } else {
                        that.$message.error(res.msg);
                    }
                });
            }
        }
    })
</script>
</html>